<template>
  <div class="root">
    <MyHeader fontColor="#fff" title="tabbar案例"></MyHeader>
    <!-- <MyGoodsList></MyGoodsList> -->
    <component :is="curComp"></component>
    <MyTabBar @changeEvent="setComp" :list="tabList"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue"
import MyTabBar from "./components/MyTabBar.vue"
import MyGoodsList from "./views/MyGoodsList.vue"
import MyGoodsSearch from "./views/MyGoodsSearch.vue"
import MyUserInfo from "./views/MyUserInfo.vue"
export default {
  components: {
    MyHeader,
    MyTabBar,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },
  data(){
    return {
      tabList: [
          {
              iconText: "icon-shangpinliebiao",
              text: "商品列表",
              componentName: "MyGoodsList"
          },
          {
              iconText: "icon-sousuo",
              text: "商品搜索",
              componentName: "MyGoodsSearch"
          },
          {
              iconText: "icon-user",
              text: "我的信息",
              componentName: "MyUserInfo"
          }
      ],
      curComp: "MyGoodsList"
    }
  },
  methods: {
    setComp(name){
      this.curComp = name
    }
  }
}
</script>

<style>
.root{
  padding-top: 45px;
}
</style>